<template>
	<view>
		<uni-nav-bar fixed="true" title="群成员" color="#FFF" backgroundColor="#6869a8" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30" color="#FFF"></uni-icons>
			</view>
		</uni-nav-bar>
		<view class="card" v-for="(item,index) in member" :key="index">
			<u-avatar :src="item.user.avatar" size="100" class="image" @click="watchFriend(item.user.id)"></u-avatar>
			<view class="text username" @click="watchFriend(item.user.id)">
				{{item.user.username}}<text class="tag" v-if="item.permission === 2">群主</text>
				<text class="tag" v-if="item.permission === 1">管理员</text>
			</view>
			<!-- <view class="button" hover-class="button_hover" @click="addFriendId = item.id">添加</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				member: [],
				permission: 0
			}
		},
		onLoad(option) {
			let gid = option.gid
			this.$request.TokenRequest({
				url: "/group/getGroupMember"
			}, {
				gid: gid
			}).then(res => {
				if (res.state === 200) {
					this.member = res.data
				}
			})
			this.$request.TokenRequest({
				url: "/group/isJoin"
			}, {
				gid: gid
			}).then(res => {
				if (res.state === 200) {
					this.permission = parseInt(res.data)
				}
			})
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			watchFriend(id) {
				uni.navigateTo({
					url: "../informationPage/informationPage?id=" + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		display: flex;
		height: 150rpx;
		align-items: center;
		border-bottom: 2rpx solid #F5F5F5;

		.image {
			padding-left: 25rpx;
			padding-right: 15rpx;
		}

		.text {
			margin: 0 7rpx;
			font-size: 34rpx;
		}

		.username {
			display: inline-block;
			max-width: 280rpx;
			overflow: hidden;
			overflow-y: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.id {
			display: inline-block;
			color: #858786;
		}

		.button {
			font-size: 32rpx;
			position: absolute;
			right: 30rpx;
			border: 1rpx solid #BABABA;
			border-radius: 15rpx;
			padding: 8rpx 28rpx;
		}

		.no {
			font-size: 28rpx;
			position: absolute;
			right: 30rpx;
			color: #BABABA;
		}

		.button_hover {
			background-color: #F5F5F5;
		}

		.des {
			color: #858786;
			font-size: 27rpx;
			max-width: 300rpx;
			overflow-y: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

		}

		.tag {
			color: #FFF;
			background-color: #ffc903;
			font-size: 25rpx;
			padding: 5rpx 10rpx;
			margin: 0 10rpx;
			border-radius: 10rpx;
		}
	}
</style>
